<template>
	<view>
		<div class="head">
			<div class="avatar">
				头像
			</div>
			<div class="nickname">
				昵称
			</div>
			<div class="nums">
				推荐人数
			</div>
		</div>
		<div class="bo" v-if="list.length" >
			<div class="item" v-for="(item,index) in list" :key="index" >
				<div class="avatar">
					<image :src="item.avatar" mode=""></image>
				</div>
				<div class="nickname">
					{{item.nickname}}
				</div>
				<div class="nums">
					{{item.nums}}
				</div>
			</div>
		</div>
		<div v-else style="padding-top: 100rpx;">
			<u-empty margin-top="50rpx" mode="list"></u-empty>
		</div>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						avatar:'https://b2c.oozetking.cn/uploads/10001/20240726/3dc00e2495700408f95facf78a2ccc49.png',
						nickname:'重生之我是0717号',
						nums:'111'
					},
					{
						avatar:'https://b2c.oozetking.cn/uploads/10001/20240726/3dc00e2495700408f95facf78a2ccc49.png',
						nickname:'重生之我是0717号',
						nums:'111'
					},
					{
						avatar:'https://b2c.oozetking.cn/uploads/10001/20240726/3dc00e2495700408f95facf78a2ccc49.png',
						nickname:'重生之我是0717号',
						nums:'111'
					},
					{
						avatar:'https://b2c.oozetking.cn/uploads/10001/20240726/3dc00e2495700408f95facf78a2ccc49.png',
						nickname:'重生之我是0717号',
						nums:'111'
					},
				]
			};
		}
	}
</script>

<style lang="scss">
.head{
	width: 750rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	padding: 26rpx 38rpx;
	box-sizing: border-box;
	font-weight: 500;
	font-size: 28rpx;
	color: #999390;
	.avatar{
		flex: 1;
	}
	.nickname{
		flex: 1;
	}
	.nums{
		flex: 6;
		display: flex;
		flex-direction: row-reverse;
	}
	
}
.bo{
	width: 750rpx;
	background: #FFFFFF;
	box-sizing: border-box;
	padding: 32rpx 24rpx;
	.item{
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #15161F;
		margin-bottom: 32rpx;
		.avatar{
			flex: 1;
			>image{
				width: 84rpx;
				height: 84rpx;
				box-sizing: 50%;
			}
		}
		.nickname{
			flex: 3;
		}
		.nums{
			flex: 6;
			display: flex;
			flex-direction: row-reverse;
			
		}
	}
}
</style>
